/**
 * zhangyunchuan
 * 还款选择银行卡组件
 */
import React, { useEffect, useState } from "react";
import { Drawer } from "antd-mobile";
import "./index.scss";
import icon_close from "@images/icon-close.png";
import icon_arrorw_right from "@images/icon-arrorw-right.png";
import icon_bank_select from "@images/icon-bank-select.png";
import icon_bank_no_select from "@images/icon-bank-no-select.png";
import icon_bank_logo from "@images/icon-bank-logo.png";

import { connect } from "react-redux";
import {
	setSelectedBankCard,
	getSelectedBankList
} from "@redux/Action/bank/bank";

const RepaymentSelectBank = props => {
	const [_selectedBankList, set_selectedBankList] = useState([]);
	const [value, setvalue] = useState({});

	useEffect(() => {
		const { selectedBankList, getSelectedBankList, value } = props;
		console.log("选择银行卡组件props:", props);
		set_selectedBankList(selectedBankList);
		setvalue(value);
		console.log(selectedBankList.length);
		if (selectedBankList.length) return; //redux中没有已选择的银行卡,那么就去重新请求
		getSelectedBankList({ channelCode: "ll" });
	});

	const handleChooseBank = bank => {
		if (props.repaymentMoney.type == "pay") {
			if (bank.dayAmount - 0 < props.repaymentMoney.totalLoanFee - 0) {
				return false;
			}
		}
		props.setSelectedBankCard(bank.cardNo);
		setTimeout(() => {
			props.close(3);  //关闭组件，传1 ，重新获取卡信息，传3，查询redux的选择的卡
		}, 100);
	};

	const handleClose = () => {
		props.close(2);  //关闭组件，传2 ，只是关闭
	};

	const addBank = () => {
		props.add();
	};

	const sidebar = (
		<div className="repayment-selcet-bank">
			<div className="bank-top">
				<div className="title-close">
					<span>选择还款银行卡</span>
					<img src={icon_close} alt="" onClick={handleClose} />
				</div>
				<div className="card-list">
					<ul>
						{_selectedBankList.map((item, index) => {
							return (
								<li onClick={() => handleChooseBank(item)} key={index}>
									<div className="item-logo-name">
										<img src={item.logoUrl} alt="" />
										<span>{item.bankName + "(" + item.cardNo + ")"}</span>
									</div>
									<img
										className="select-icon"
										src={
											value && value.bankAccount == item.cardNo
												? icon_bank_select
												: icon_bank_no_select
										}
										alt=""
									/>
								</li>
							);
						})}
					</ul>
				</div>
			</div>
			<div className="add-bank-btn" onClick={addBank}>
				<div className="btn-logo-title">
					<img src={icon_bank_logo} alt="" />
					<span>添加银行卡</span>
				</div>
				<img className="icon-right" src={icon_arrorw_right} alt="" />
			</div>
		</div>
	);

	return (
		<Drawer
			className={
				props.open
					? "repayment-selcet-bank-drawer"
					: "repayment-selcet-bank-drawer hidden"
			}
			enableDragHandle
			position="bottom"
			contentStyle={{ color: "#A6A6A6", textAlign: "center", paddingTop: 42 }}
			open={props.open}
			sidebar={sidebar}
		>
			{props.children}
		</Drawer>
	);
};

const mapStateToProps = state => ({
	...state,
	supportedBankList: state.bankReducer.supportedBankList || [],
	selectedBankList: state.bankReducer.selectedBankList,
	repaymentMoney: state.repaymentMoney
});
const mapDispatchToProps = dispatch => {
	return {
		setSelectedBankCard: value => dispatch(setSelectedBankCard(value)),
		getSelectedBankList: value => dispatch(getSelectedBankList(value))
	};
};

export default connect(
	mapStateToProps,
	mapDispatchToProps
)(RepaymentSelectBank);
